<template>
  <div class="require-develop">
    <div class="drawer-wrap" :class="{ disabled: !editable }" v-loading="loading">
      <div class="drawer-content tag-scrollbar">
        <el-form :model="editForm" label-width="0" :rules="editFormRules" ref="editForm">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="source-item">
                <div class="star"></div>
                <div class="source-title linear-purpose">数据源</div>
                <div class="source-content">
                  <el-form-item prop="plfmId">
                    <el-select v-model="editForm.plfmId" :disabled="!editable" filterable clearable>
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in platforms"
                        :key="item.plfmId"
                        :label="item.plfmNm"
                        :value="item.plfmId"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="source-item">
                <div class="star"></div>
                <div class="source-title linear-purpose">数据库</div>
                <div class="source-content">
                  <el-form-item prop="dbNm">
                    <el-select v-model="editForm.dbNm" :disabled="!editable" filterable clearable>
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in dbList"
                        :key="item.dbId"
                        :label="item.dbName"
                        :value="item.dbName"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="source-item">
                <div class="star"></div>
                <div class="source-title linear-blue">数据表</div>
                <div class="source-content">
                  <el-form-item prop="tableNm">
                    <el-select v-model="editForm.tableNm" :disabled="!editable" filterable clearable>
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in tableList"
                        :key="item.tableId"
                        :label="item.tableNm"
                        :value="item.tableNm"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12" v-if="tagInfo.tagKindId !== 5">
              <div class="source-item">
                <div class="star"></div>
                <div class="source-title linear-blue">{{ tagInfo.tagKindId === 4 ? '事件ID' : '字段' }}</div>
                <div class="source-content">
                  <el-form-item prop="fieldNm">
                    <el-input placeholder="请输入字段" v-model="editForm.fieldNm" :disabled="!editable"></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="source-item">
                <div class="source-title linear-cyan">关联字段</div>
                <div class="source-content rela-content">
                  <el-form-item prop="relaFields">
                    {{ editForm.relaFields.join(',') }}
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12" v-if="tagInfo.tagKindId !== 4 && tagInfo.tagKindId !== 5">
              <div class="source-item">
                <div class="star"></div>
                <div class="source-title linear-cyan">取值类型</div>
                <div class="source-content">
                  <el-form-item prop="valueType">
                    <el-select v-model="editForm.valueType" :disabled="!editable" @change="changeType">
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in $dictList('value_type')"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="source-item">
                <div class="star"></div>
                <div class="source-title linear-red">更新频率</div>
                <div class="source-content">
                  <el-form-item prop="updateFreq">
                    <el-select v-model="editForm.updateFreq" :disabled="!editable" @change="clearUpdateValue">
                      <el-option
                        v-for="dict in $dictList('update_freq')"
                        :key="dict.key"
                        :value="dict.key"
                        :label="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="source-item">
                <div class="source-title linear-red">
                  更新规则
                  <freq-tips></freq-tips>
                </div>
                <div class="source-content">
                  <el-form-item
                    prop="updateFreqValue"
                    :rules="editForm.updateFreq === 1 ? { validator: numberRules, trigger: 'blur' } : {}"
                  >
                    <el-date-picker
                      v-model="editForm.updateFreqValue"
                      value-format="yyyy-MM-dd"
                      placeholder="请选择日期"
                      :picker-options="editForm.updateFreq === 0 ? pickOptions : MonthPickOptions"
                      :disabled="!editable"
                      v-if="editForm.updateFreq === 0 || editForm.updateFreq === 4"
                    ></el-date-picker>
                    <el-input
                      v-model="editForm.updateFreqValue"
                      placeholder="请输入更新规则"
                      :disabled="!editable"
                      v-else-if="editForm.updateFreq === 1"
                    ></el-input>
                    <el-select v-model="editForm.updateFreqValue" :disabled="!editable" v-else>
                      <el-option label="---" value=""></el-option>
                      <template v-if="editForm.updateFreq === 2">
                        <el-option v-for="item in 7" :key="item" :label="item" :value="item.toString()"></el-option>
                      </template>
                      <template v-else-if="editForm.updateFreq === 3">
                        <el-option label="月末" value="0"></el-option>
                        <el-option v-for="item in 28" :key="item" :label="item" :value="item.toString()"></el-option>
                      </template>
                    </el-select>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="source-item">
                <div class="star"></div>
                <div class="source-title linear-yellow">开发排版</div>
                <div class="source-content">
                  <el-form-item prop="planScheduleDt">
                    <el-date-picker
                      v-model="editForm.planScheduleDt"
                      placeholder="选择日期"
                      type="month"
                      value-format="yyyy-MM"
                      :disabled="!editable"
                    ></el-date-picker>
                  </el-form-item>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="source-item">
                <div class="source-title linear-yellow">标签编码</div>
                <div class="source-content">
                  <el-form-item prop="tagCode">
                    <span style="margin-left: 10px">{{ tagInfo.tagCode }}</span>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20" v-if="editForm.syncRecords.length">
            <el-col :span="24">
              <div class="source-item sync-item">
                <div class="source-title linear-blue"><span>数据同步</span></div>
                <div class="source-content">
                  <el-row class="sync-row-title">
                    <el-col :span="6">同步平台</el-col>
                    <el-col :span="6">同步数据库</el-col>
                    <el-col :span="6">同步数据表</el-col>
                    <el-col :span="6">同步字段</el-col>
                  </el-row>
                  <el-row v-for="(item, index) in editForm.syncRecords" :key="item.plfmId">
                    <el-col :span="6">
                      <el-form-item :prop="`syncRecords[${index}].checked`">
                        <el-checkbox v-model="item.checked" :disabled="!editable" @change="changeSync($event, index)">{{
                          item.syncPlfmNm
                        }}</el-checkbox>
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="5">{{ item.syncPlfmNm }}</el-col> -->
                    <el-col :span="6">
                      <el-form-item
                        :prop="`syncRecords[${index}].syncDbNm`"
                        :rules="{
                          validator: checkSyncForm,
                          trigger: 'blur'
                        }"
                      >
                        <el-input v-model="item.syncDbNm" :disabled="!item.checked"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        :prop="`syncRecords[${index}].syncTableNm`"
                        :rules="{
                          validator: checkSyncForm,
                          trigger: 'blur'
                        }"
                      >
                        <el-input v-model="item.syncTableNm" :disabled="!item.checked"></el-input>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        :prop="`syncRecords[${index}].syncFieldNm`"
                        :rules="{
                          validator: checkSyncForm,
                          trigger: 'blur'
                        }"
                      >
                        <el-input v-model="item.syncFieldNm" :disabled="!item.checked"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <div class="card row2">
                <div class="title">
                  <icon-svg name="iconItstmt"></icon-svg><br />
                  技术口径
                </div>
                <div class="content blue">
                  <el-form-item prop="itStmt">
                    <el-input
                      placeholder="请输入技术口径"
                      v-model="editForm.itStmt"
                      type="textarea"
                      :maxlength="3000"
                      :rows="5"
                      :show-word-limit="true"
                      :disabled="!editable"
                    ></el-input>
                  </el-form-item>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="params-selection">
            <div class="star"></div>
            <el-form-item label="是否枚举：" label-width="120px" prop="enumTag">
              <el-radio-group v-model="editForm.enumTag" :disabled="!editable || editForm.valueType != 1">
                <el-radio :label="1">
                  是
                </el-radio>
                <el-radio :label="0">
                  否
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>

          <template v-if="editForm.enumTag === 1">
            <div class="params">
              <el-form-item label="添加方式：" label-width="120px" prop="isEnumImport">
                <el-radio-group v-model="editForm.isEnumImport" :disabled="!editable || editForm.enumVals.length >= 30">
                  <el-radio :label="false">
                    立即填写
                  </el-radio>
                  <el-radio :label="true">
                    批量导入
                  </el-radio>
                </el-radio-group>
                <span class="tips">
                  如枚举值过多，建议使用批量导入方式添加
                </span>
              </el-form-item>
              <template v-if="!editForm.isEnumImport">
                <el-row :gutter="20" class="params-title">
                  <el-col :span="10">枚举值</el-col>
                  <el-col :span="10">描述</el-col>
                </el-row>
                <el-row :gutter="20" v-for="(item, index) in editForm.enumVals" :key="'enumVals' + index">
                  <el-col :span="10">
                    <el-form-item
                      :prop="'enumVals.' + index + '.cdVal'"
                      :rules="[
                        {
                          required: true,
                          message: '枚举值不能为空',
                          trigger: 'blur'
                        },
                        { max: 100, message: '枚举值不能超过100个字符', trigger: 'blur' }
                      ]"
                    >
                      <el-input
                        v-model="item.cdVal"
                        :placeholder="'枚举值' + (index + 1)"
                        :disabled="!editable"
                      ></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item
                      :prop="'enumVals.' + index + '.cdDesc'"
                      label-width="0"
                      :rules="{ max: 500, message: '描述不能超过500个字符', trigger: 'blur' }"
                    >
                      <el-input v-model="item.cdDesc" placeholder="描述" :disabled="!editable"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" v-if="editable">
                    <el-button
                      type="primary"
                      icon="el-icon-plus"
                      size="mini"
                      circle
                      @click="addParams('enumVals')"
                    ></el-button>
                    <el-button
                      type="warning"
                      icon="el-icon-minus"
                      size="mini"
                      circle
                      @click="remove('enumVals', index)"
                      v-if="index !== 0"
                    ></el-button>
                  </el-col>
                </el-row>
              </template>
            </div>
          </template>
          <div class="params-selection">
            <div class="star"></div>
            <el-form-item label="是否带参数：" label-width="120px" prop="haveParam">
              <el-radio-group v-model="editForm.haveParam" :disabled="!editable">
                <el-radio :label="1">
                  是
                </el-radio>
                <el-radio :label="0">
                  否
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </div>
          <template v-if="editForm.haveParam === 1">
            <div class="params">
              <el-row :gutter="20" class="params-title">
                <el-col :span="5">参数名称</el-col>
                <el-col :span="4">参数类型</el-col>
                <el-col :span="2">是否枚举</el-col>
                <el-col :span="4">参数字段</el-col>
                <el-col :span="5">可选参数值</el-col>
              </el-row>
              <el-row :gutter="20" v-for="(item, index) in editForm.params" :key="'params' + index">
                <el-col :span="5">
                  <el-form-item
                    :prop="'params.' + index + '.paramNm'"
                    :rules="[
                      {
                        required: true,
                        message: '参数名称不能为空',
                        trigger: 'blur'
                      },
                      { max: 100, message: '参数名称不能超过100个字符', trigger: 'blur' }
                    ]"
                  >
                    <el-input v-model="item.paramNm" placeholder="参数名称" :disabled="!editable"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :prop="'params.' + index + '.paramType'"
                    :rules="{
                      required: true,
                      message: '参数类型不能为空',
                      trigger: 'change'
                    }"
                    label-width="0"
                  >
                    <el-select v-model="item.paramType" :disabled="!editable">
                      <el-option label="---" value=""></el-option>
                      <el-option
                        v-for="item in $dictList('value_type')"
                        :key="item.key"
                        :label="item.value"
                        :value="item.key"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2" align="center">
                  <el-form-item :prop="'params.' + index + '.enumTag'" label-width="0">
                    <el-checkbox v-model="item.enumTag" :true-label="1" :false-label="0"></el-checkbox>
                  </el-form-item>
                </el-col>
                <el-col :span="4">
                  <el-form-item
                    :prop="'params.' + index + '.fieldNm'"
                    :rules="{
                      required: true,
                      message: '参数字段不能为空',
                      trigger: 'blur'
                    }"
                    label-width="0"
                  >
                    <el-input v-model="item.fieldNm" placeholder="参数字段" :disabled="!editable"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="5" :align="item.enumTag === 1 ? 'none' : 'center'">
                  <el-form-item
                    :prop="'params.' + index + '.optParamVal'"
                    :rules="item.enumTag === 1 ? { required: true, message: '参数值不能为空', trigger: 'change' } : {}"
                  >
                    <el-input
                      v-model="item.optParamVal"
                      placeholder="可选参数值"
                      readonly
                      class="enums-box"
                      v-if="item.enumTag === 1"
                      @click.native="$refs.enumsDialog.showDialog({ optParamVal: item.optParamVal, index: index })"
                    ></el-input>
                    <span v-else>---</span>
                  </el-form-item>
                </el-col>
                <el-col :span="4" v-if="editable">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    size="mini"
                    circle
                    @click="addParams('params')"
                  ></el-button>
                  <el-button
                    type="warning"
                    icon="el-icon-minus"
                    size="mini"
                    circle
                    @click="remove('params', index)"
                    v-if="index !== 0"
                  ></el-button>
                </el-col>
              </el-row>
            </div>
          </template>
          <div class="info">
            <div class="content-divider first">
              <div class="clearfix">
                <div class="number">01</div>
                <div class="divider-title">标签信息<br />Tag information</div>
                <div class="bg"></div>
              </div>
            </div>
            <el-row :gutter="20">
              <el-col :span="12" :offset="6">
                <div class="tag-name">
                  <span>{{ tagInfo.tagNm }}</span>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="ol-item">
                  <span>标签类别：</span>
                  {{ tagInfo.tagKind }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="ol-item">
                  <span>统计粒度：</span>
                  {{ tagInfo.hqTag }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="ol-item">
                  <span>客户统计范围：</span>
                  {{ tagInfo.clientStatRange }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="ol-item">
                  <span>唯一标识：</span>
                  {{ tagInfo.identifierFlag ? '是' : '否' }}
                </div>
              </el-col>
              <el-col :span="12">
                <div class="ol-item">
                  <span>计划排版：</span>
                  {{ tagInfo.requireScheduleDt }}
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="24">
                <div class="ol-item">
                  <span>上线平台：</span>
                  <span v-for="(item, index) in tagInfo.appPlfms" :key="index" class="card-item">
                    <icon-svg name="iconScene"></icon-svg>{{ item }}
                  </span>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card ol-card">
                  <div class="card-title">
                    <icon-svg name="iconStory"></icon-svg><br />
                    标签故事
                  </div>
                  <div class="card-content blue">
                    <el-input
                      placeholder="请输入标签故事"
                      v-model="tagInfo.tagStory"
                      type="textarea"
                      :rows="5"
                      disabled
                    ></el-input>
                  </div>
                </div>
              </el-col>
              <el-col :span="24">
                <div class="card ol-card">
                  <div class="card-title">
                    <icon-svg name="iconBizstmt"></icon-svg><br />
                    业务口径
                  </div>
                  <div class="card-content blue">
                    <el-input
                      placeholder="请输入标签故事"
                      v-model="tagInfo.bizStmt"
                      type="textarea"
                      :rows="5"
                      disabled
                    ></el-input>
                  </div>
                </div>
              </el-col>
            </el-row>
            <div class="content-divider second">
              <div class="clearfix">
                <div class="number">02</div>
                <div class="divider-title">责任人信息<br />Responsible person information</div>
                <div class="bg"></div>
              </div>
            </div>
            <el-row :gutter="20" class="response">
              <el-col :span="6">
                <div class="card">
                  <div>
                    <span class="icon linear-purpose">
                      <icon-svg name="iconResTeam"></icon-svg>
                    </span>
                  </div>
                  <div class="title">责任团队</div>
                  <div class="content">
                    {{ tagInfo.respTeamNm }}
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="card">
                  <div>
                    <span class="icon linear-blue">
                      <icon-svg name="iconResponse"></icon-svg>
                    </span>
                  </div>
                  <div class="title">责任人</div>
                  <div class="content">
                    {{ tagInfo.responserNm ? $name(tagInfo, 'responserNnm', 'responserNm') : '暂无' }}
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="card">
                  <div>
                    <span class="icon linear-yellow">
                      <icon-svg name="iconResTeam"></icon-svg>
                    </span>
                  </div>
                  <div class="title">开发团队</div>
                  <div class="content">
                    {{ tagInfo.amartDevTeamNm }}
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="card">
                  <div>
                    <span class="icon linear-cyan">
                      <icon-svg name="iconResponse"></icon-svg>
                    </span>
                  </div>
                  <div class="title">开发负责人</div>
                  <div class="content">
                    {{ $name(tagInfo, 'amartDeveloperNnm', 'amartDeveloper') }}
                  </div>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="card">
                  <div>
                    <span class="icon linear-purpose">
                      <icon-svg name="iconRequirer"></icon-svg>
                    </span>
                  </div>
                  <div class="title">提出人</div>
                  <div class="content">
                    {{ $name(tagInfo, 'requirerNnm', 'requirerNm') }}
                  </div>
                </div>
              </el-col>
            </el-row>

            <div class="content-divider third">
              <div class="clearfix">
                <div class="number">03</div>
                <div class="divider-title">需求状态<br />Require status</div>
                <div class="bg"></div>
              </div>
            </div>
            <ul class="tag-status-list">
              <li v-for="(item, index) in tagInfo.requireStatusList" :key="index">
                <el-row :gutter="20">
                  <el-col :span="5">{{ $name(item, 'handlerNnm', 'handlerNm') }}</el-col>
                  <el-col :span="5">{{ item.nodeNm }}</el-col>
                  <el-col :span="7">{{ item.procTm }}</el-col>
                  <el-col :span="7">{{ item.handlerCmnt }}</el-col>
                </el-row>
              </li>
            </ul>
          </div>
        </el-form>
      </div>
    </div>
    <div class="drawer-btns" v-if="editable">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="warning" size="medium" @click="handleReject">驳回</el-button>
      <el-button type="primary" size="medium" @click="assignHandler">更换审批人</el-button>
      <el-button type="primary" size="medium" @click="changeCode">更新标签编码</el-button>
      <el-button type="primary" size="medium" @click="save">保存</el-button>
      <el-button type="primary" size="medium" @click="handleSubmit">提交</el-button>
    </div>
    <require-confirm ref="requireConfirm" @callback="confirm"></require-confirm>
    <user-selection ref="userSelection" :nodeId="50" @callback="confirmUser"></user-selection>
    <tag-reject ref="tagReject" @callback="confirm"></tag-reject>
    <tag-text-dialog ref="tagTextDialog"></tag-text-dialog>
    <enums-dialog ref="enumsDialog" @updateParams="updateParams"></enums-dialog>
  </div>
</template>

<script>
import enumsDialog from '@/components/tag-enums-dialog'
import freqTips from '@/components/tag-freq-tips'
import tagReject from '../../../../components/tag-reject-selection'
import userSelection from '../../../../components/tag-user-selection'
import requireConfirm from '../components/require-confirm'
export default {
  components: {
    requireConfirm,
    userSelection,
    tagReject,
    enumsDialog,
    freqTips
  },
  data() {
    const fieldValidator = (rule, value, callback) => {
      let patt = /^[0-9a-zA-Z_]{1,}$/
      if (!patt.test(value)) {
        return callback(new Error('字段名称只能输入字母数字和下划线'))
      } else {
        const avalue = [...new Set(value.trim().split(''))]
        if (!isNaN(value)) {
          return callback(new Error('字段名称不能为纯数字'))
        } else if (!isNaN(value.substr(0, 1))) {
          return callback(new Error('字段名称首字母不能为数字'))
        } else if (avalue.length == 1 && avalue[0] === '_') {
          return callback(new Error('字段名称不能为纯下划线'))
        } else return callback()
      }
    }
    return {
      firstLoad: true,
      editable: false,
      loading: false,
      reassign: false,
      isChange: false,
      platforms: [],
      dbList: [],
      tableList: [],
      editForm: {
        tagId: '',
        plfmId: '',
        dbNm: '',
        tableNm: '',
        fieldNm: '',
        relaFields: [],
        valueType: '',
        syncRecords: [],
        itStmt: '',
        updateFreq: '',
        updateFreqValue: '',
        enumTag: '',
        enumVals: [],
        haveParam: '',
        params: [],
        isEnumImport: false,
        planScheduleDt: ''
      },
      tagInfo: {
        tagNm: '',
        respTeamNm: '',
        responserNm: '',
        responserNnm: '',
        requirerNm: '',
        requirerNnm: '',
        tagKind: '',
        tagKindId: '',
        hqTag: '',
        clientStatRange: '',
        appPlfms: [],
        tagStory: '',
        bizStmt: '',
        identifierFlag: '',
        amartDevTeamNm: '',
        amartDeveloper: '',
        amartDeveloperNnm: '',
        requireScheduleDt: '',
        tagCode: ''
      },
      editFormRules: {
        plfmId: [{ required: true, message: '平台不能为空', trigger: 'change' }],
        dbNm: [{ required: true, message: '数据库不能为空', trigger: 'change' }],
        tableNm: [{ required: true, message: '数据表不能为空', trigger: 'change' }],
        fieldNm: [
          { required: true, message: '字段不能为空', trigger: 'blur' },
          { validator: this.$checkEmpty('字段名称不能为空'), trigger: 'blur' },
          { validator: fieldValidator, trigger: 'blur' }
        ],
        valueType: [{ required: true, message: '取值类型不能为空', trigger: 'change' }],
        updateFreq: [{ validator: this.$checkBoolNum('更新频率必须选择'), trigger: 'change' }],
        planScheduleDt: [{ required: true, message: '开发排版日期必须选择', trigger: 'change' }],
        enumTag: [{ validator: this.$checkBoolNum('是否枚举必须选择'), trigger: 'change' }],
        haveParam: [{ validator: this.$checkBoolNum('是否带参数必须选择'), trigger: 'change' }]
      },
      numberRules: (rule, value, callback) => {
        if (value === '') callback()
        else {
          if (isNaN(value)) callback(new Error('只能输入大于0的正整数'))
          else {
            if (Number(value) > 0) {
              if (Number(value) % 1 === 0) callback()
              else callback(new Error('只能输入大于0的正整数'))
            } else callback(new Error('只能输入大于0的正整数'))
          }
        }
      },
      checkSyncForm: (rule, value, callback) => {
        let field = rule.field.split('.')[0]
        let fieldname = field.split('[')[0]
        let index = Number(field.split('[')[1].split(']')[0])
        if (this.editForm[fieldname][index].checked) {
          if (!value) callback(new Error('数据同步项不能为空'))
          else {
            let patt = /^[0-9a-zA-Z_]{1,}$/
            if (!patt.test(value)) {
              callback(new Error('数据同步项只能输入字母数字和下划线'))
            } else {
              const avalue = [...new Set(value.trim().split(''))]
              if (!isNaN(value)) {
                callback(new Error('数据同步项不能为纯数字'))
              } else if (!isNaN(value.substr(0, 1))) {
                callback(new Error('数据同步项首字母不能为数字'))
              } else if (avalue.length == 1 && avalue[0] === '_') {
                callback(new Error('数据同步项不能为纯下划线'))
              } else callback()
            }
          }
        } else callback()
      },
      pickOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime()
        }
      },
      MonthPickOptions: {
        disabledDate(time) {
          const year = new Date().getFullYear()
          const beginTime = new Date(year - 1 + '-12-31 23:59:59')
          const endTime = new Date(year + '-12-31 23:59:59')
          return !(time.getTime() > beginTime.getTime() && time.getTime() < endTime.getTime())
        }
      }
    }
  },
  watch: {
    'editForm.plfmId'(val) {
      this.dbList = []
      this.tableList = []
      this.editForm.dbNm = ''
      this.editForm.tableNm = ''
      this.editForm.relaFields = []
      this.initSyncRecords()
      if (val) this.getDbList()
    },
    'editForm.dbNm'(val) {
      this.tableList = []
      this.editForm.tableNm = ''
      this.editForm.relaFields = []
      if (val) this.getTableList()
    },
    'editForm.tableNm'(val) {
      this.editForm.relaFields = []
      if (val && !this.firstLoad) this.getRelaFields()
    }
  },
  methods: {
    init(tag) {
      this.getPlatforms(tag)
    },
    initSyncRecords() {
      let index = this.editForm.syncRecords.findIndex(item => item.syncPlfmId === this.editForm.plfmId)
      if (index >= 0) this.editForm.syncRecords.splice(index, 1)
      this.platforms.forEach(platform => {
        if (
          platform.plfmId !== this.editForm.plfmId &&
          !this.editForm.syncRecords.find(item => item.syncPlfmId === platform.plfmId)
        ) {
          this.editForm.syncRecords.push({
            checked: false,
            syncPlfmId: platform.plfmId,
            syncPlfmNm: platform.plfmNm,
            syncDbNm: '',
            syncTableNm: '',
            syncFieldNm: ''
          })
        }
      })
    },
    changeSync(val, index) {
      if (!val) {
        this.editForm.syncRecords[index].syncDbNm = ''
        this.editForm.syncRecords[index].syncTableNm = ''
        this.editForm.syncRecords[index].syncFieldNm = ''
      }
    },
    getPlatforms(tag) {
      this.$ajax({
        url: this.$ajax.setUrl('mta/mtaPlatform/getAll'),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.platforms = data.data
          this.initTag(tag)
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getDbList() {
      this.$ajax({
        url: this.$ajax.setUrl(`mta/mtaDatabase/plfmId/${this.editForm.plfmId}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.dbList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getTableList() {
      this.$ajax({
        url: this.$ajax.setUrl(`mta/mtaTable/getTableList/${this.editForm.plfmId}/${this.editForm.dbNm}`),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.tableList = data.data
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    getRelaFields() {
      this.$ajax({
        url: this.$ajax.setUrl(
          `mta/mtaField/getRelaFieldList/${this.editForm.plfmId}/${this.editForm.dbNm}/${this.editForm.tableNm}`
        ),
        method: 'get',
        params: this.$ajax.setParams()
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.editForm.relaFields = data.data
          this.firstLoad = false
        } else {
          this.$message.error(data.data || data.msg)
        }
      })
    },
    initTag(tag) {
      this.isChange = tag.isChange
      this.editable = tag.isModify
      this.editForm.tagId = tag.tagId
      this.editForm.plfmId = tag.plfmId === 0 ? '' : tag.plfmId
      this.editForm.valueType = tag.valueTypeId === 0 ? '' : tag.valueTypeId
      this.editForm.itStmt = tag.itStmt
      this.editForm.updateFreq = tag.updateFreqId
      this.editForm.updateFreqValue = tag.updateFreqValue
        ? tag.updateFreqId === 4
          ? new Date().getFullYear() + '-' + tag.updateFreqValue
          : tag.updateFreqValue
        : ''
      this.editForm.planScheduleDt = tag.planScheduleDt ? tag.planScheduleDt.substring(0, 7) : tag.planScheduleDt
      this.editForm.enumTag = tag.enumTag
      this.editForm.enumVals = tag.enumVals.length ? tag.enumVals : [{ cdVal: '', cdDesc: '' }]
      if ((tag.enumTag === 1 && !tag.enumVals.length) || tag.enumVals.length > 10) this.editForm.isEnumImport = true
      this.editForm.haveParam = tag.haveParam
      this.editForm.params = tag.params.length
        ? tag.params
        : [{ paramNm: '', paramType: '', enumTag: 0, fieldNm: '', optParamVal: '' }]
      this.editForm.handlerId = ''
      this.editForm.fieldNm = tag.field
      this.$nextTick(() => {
        this.editForm.dbNm = tag.db
        this.$nextTick(() => {
          this.editForm.tableNm = tag.table
          this.$nextTick(() => {
            this.editForm.relaFields = tag.relaFields
            this.firstLoad = false
          })
        })
      })
      this.$nextTick(() => {
        // 同步数据
        tag.syncRecords.forEach(item => {
          let index = this.editForm.syncRecords.findIndex(value => value.syncPlfmId === item.syncPlfmId)
          if (index >= 0) {
            this.editForm.syncRecords[index].checked = true
            this.editForm.syncRecords[index].syncDbNm = item.syncDbNm
            this.editForm.syncRecords[index].syncFieldNm = item.syncFieldNm
            this.editForm.syncRecords[index].syncTableNm = item.syncTableNm
          }
        })
      })
      this.tagInfo = {
        tagNm: tag.tagNm,
        respTeamNm: tag.respTeamNm,
        responserNm: tag.responserNm,
        responserNnm: tag.responserNnm,
        requirerNm: tag.requirerNm,
        requirerNnm: tag.requirerNnm,
        tagKind: tag.tagKind,
        tagKindId: tag.tagKindId,
        hqTag: tag.hqTag,
        clientStatRange: tag.clientStatRange,
        appPlfms: [],
        tagStory: tag.tagStory,
        bizStmt: tag.bizStmt,
        identifierFlag: tag.identifierFlag,
        requireStatusList: tag.requireStatusList,
        amartDevTeamNm: tag.amartDevTeamNm,
        amartDeveloper: tag.amartDeveloper,
        amartDeveloperNnm: tag.amartDeveloperNnm,
        requireScheduleDt: tag.requireScheduleDt ? tag.requireScheduleDt.substring(0, 7) : '',
        tagCode: tag.tagCode
      }
      tag.appPlfms.forEach(v => this.tagInfo.appPlfms.push(v.appPlfmNm))
      this.$nextTick(() => this.$refs['editForm'].clearValidate())
    },
    addParams(name) {
      if (name === 'enumVals') this.editForm[name].push({ cdVal: '', cdDesc: '' })
      else this.editForm[name].push({ paramNm: '', paramType: '', enumTag: 0, fieldNm: '', optParamVal: '' })
    },
    remove(name, index) {
      this.editForm[name].splice(index, 1)
    },
    updateParams(opt, index) {
      this.editForm.params[index].optParamVal = opt
    },
    handleCancel() {
      this.clearForm()
      this.$emit('close')
    },
    clearUpdateValue() {
      this.editForm.updateFreqValue = ''
    },
    clearForm() {
      this.firstLoad = true
      this.loading = false
      this.reassign = false
      this.isChange = false
      this.editForm = {
        tagId: '',
        plfmId: '',
        dbNm: '',
        tableNm: '',
        fieldNm: '',
        relaFields: [],
        valueType: '',
        itStmt: '',
        updateFreq: '',
        updateFreqValue: '',
        planScheduleDt: '',
        syncRecords: [],
        enumTag: '',
        enumVals: [],
        isEnumImport: false,
        haveParam: '',
        params: [],
        handlerId: ''
      }
      this.tagInfo = {
        tagNm: '',
        respTeamNm: '',
        responserNm: '',
        responserNnm: '',
        requirerNm: '',
        tagKind: '',
        tagKindId: '',
        hqTag: '',
        clientStatRange: '',
        appPlfms: [],
        tagStory: '',
        bizStmt: '',
        identifierFlag: '',
        amartDevTeamNm: '',
        amartDeveloper: '',
        amartDeveloperNnm: '',
        requireStatusList: [],
        requireScheduleDt: ''
      }
      this.$refs.editForm.clearValidate()
    },
    save() {
      this.$refs['editForm'].clearValidate()
      this.loading = true
      this.editForm.params.forEach(v => {
        v.plfmId = this.editForm.plfmId
        v.dbName = this.editForm.dbNm
        v.tableNm = this.editForm.tableNm
        v.tagId = this.tagId
      })
      let syncRecords = []
      this.editForm.syncRecords.forEach(item => {
        if (item.checked)
          syncRecords.push({
            syncDbNm: item.syncDbNm,
            syncFieldNm: item.syncFieldNm,
            syncPlfmId: item.syncPlfmId,
            syncPlfmNm: item.syncPlfmNm,
            syncTableNm: item.syncTableNm,
            tagId: this.editForm.tagId
          })
      })
      this.editForm.params.forEach(item => {
        if (!item.enumTag) item.optParamVal = ''
      })
      // if (this.editForm.enumVals.length && !this.editForm.enumVals[0].cdVal) this.editForm.enumVals.splice(0, 1)
      let url = this.isChange ? 'ast/astTagRequireModify/devProcSave' : 'ast/astTagRequireManager/devProcSave'
      let itStmt = new Buffer(this.editForm.itStmt).toString('base64')
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'post',
        data: this.$ajax.setData({
          dbNm: this.editForm.dbNm,
          enumTag: this.editForm.enumTag,
          enumVals: this.editForm.enumVals,
          fieldNm: this.tagInfo.tagKindId === 5 ? '' : this.editForm.fieldNm,
          relaFields: this.editForm.relaFields,
          haveParam: this.editForm.haveParam,
          params: this.editForm.haveParam ? this.editForm.params : [],
          plfmId: this.editForm.plfmId,
          tableNm: this.editForm.tableNm,
          updateFreq: this.editForm.updateFreq,
          updateFreqValue: this.editForm.updateFreqValue
            ? this.editForm.updateFreq === 4
              ? this.editForm.updateFreqValue.substring(5)
              : this.editForm.updateFreqValue
            : '',
          planScheduleDt:
            this.editForm.planScheduleDt && this.editForm.planScheduleDt.split('-').length <= 2
              ? this.editForm.planScheduleDt + '-01'
              : this.editForm.planScheduleDt,
          valueType: this.tagInfo.tagKindId === 4 || this.tagInfo.tagKindId === 5 ? 1 : this.editForm.valueType,
          tagId: this.editForm.tagId,
          itStmt: itStmt,
          syncRecords: syncRecords
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.tagInfo.tagCode = data.data
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    submit() {
      this.editForm.params.forEach(v => {
        v.plfmId = this.editForm.plfmId
        v.dbName = this.editForm.dbNm
        v.tableNm = this.editForm.tableNm
        v.tagId = this.tagId
      })
      let syncRecords = []
      this.editForm.syncRecords.forEach(item => {
        if (item.checked)
          syncRecords.push({
            syncDbNm: item.syncDbNm,
            syncFieldNm: item.syncFieldNm,
            syncPlfmId: item.syncPlfmId,
            syncPlfmNm: item.syncPlfmNm,
            syncTableNm: item.syncTableNm,
            tagId: this.editForm.tagId
          })
      })
      this.editForm.params.forEach(item => {
        if (!item.enumTag) item.optParamVal = ''
      })
      if (this.editForm.enumVals.length && !this.editForm.enumVals[0].cdVal) this.editForm.enumVals.splice(0, 1)
      let url = this.isChange ? 'ast/astTagRequireModify/devProcSubmit' : 'ast/astTagRequireManager/devProcSubmit'
      let itStmt = new Buffer(this.editForm.itStmt).toString('base64')
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'post',
        data: this.$ajax.setData({
          dbNm: this.editForm.dbNm,
          enumTag: this.editForm.enumTag,
          enumVals: this.editForm.enumVals,
          fieldNm: this.tagInfo.tagKindId === 5 ? '' : this.editForm.fieldNm,
          relaFields: this.editForm.relaFields,
          haveParam: this.editForm.haveParam,
          params: this.editForm.haveParam ? this.editForm.params : [],
          plfmId: this.editForm.plfmId,
          tableNm: this.editForm.tableNm,
          updateFreq: this.editForm.updateFreq,
          updateFreqValue: this.editForm.updateFreqValue
            ? this.editForm.updateFreq === 4
              ? this.editForm.updateFreqValue.substring(5)
              : this.editForm.updateFreqValue
            : '',
          planScheduleDt:
            this.editForm.planScheduleDt && this.editForm.planScheduleDt.split('-').length <= 2
              ? this.editForm.planScheduleDt + '-01'
              : this.editForm.planScheduleDt,
          valueType: this.tagInfo.tagKindId === 4 || this.tagInfo.tagKindId === 5 ? 1 : this.editForm.valueType,
          tagId: this.editForm.tagId,
          itStmt: itStmt,
          syncRecords: syncRecords,
          handlerId: ''
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$refs.requireConfirm.showDialog()
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    changeCode() {
      this.$refs['editForm'].validateField('plfmId', plfm => {
        if (!plfm) {
          this.$refs['editForm'].validateField('dbNm', table => {
            if (!table) {
              this.$refs['editForm'].validateField('tableNm', db => {
                if (!db) {
                  if (this.tagInfo.tagKindId !== 5) {
                    this.$refs['editForm'].validateField('fieldNm', field => {
                      if (!field) {
                        this.confirmCode()
                      }
                    })
                  } else {
                    this.confirmCode()
                  }
                }
              })
            }
          })
        }
      })
    },
    changeType(val) {
      if (val != 1) this.editForm.enumTag = 0
    },
    confirmCode() {
      this.loading = true
      let url = this.isChange ? 'ast/astTagRequireModify/generateTagCode' : 'ast/astTagRequireManager/generateTagCode'
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'post',
        data: this.$ajax.setData({
          dbNm: this.editForm.dbNm,
          fieldNm: this.editForm.fieldNm,
          plfmId: this.editForm.plfmId,
          tableNm: this.editForm.tableNm,
          tagId: this.editForm.tagId
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          if (data.data) this.tagInfo.tagCode = data.data
          this.$message.success(data.msg)
        } else {
          this.$message.error(data.data || data.msg)
        }
        this.loading = false
      })
    },
    handleReject() {
      this.$refs.tagReject.showDialog(this.editForm.tagId, this.isChange)
    },
    assignHandler() {
      this.loading = true
      this.reassign = true
      this.$refs.userSelection.showDialog(this.reassign)
    },
    handleSubmit() {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          this.loading = true
          this.$confirm('确定提交到标签验证？')
            .then(() => {
              let messageBox = document.getElementsByClassName('el-message-box__wrapper')
              messageBox[0].focus() // 防止按空格键重复确定
              this.submit()
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    },
    confirm() {
      this.$emit('callback')
      this.clearForm()
    },
    changeHandler(handlerId) {
      let url = this.isChange ? 'ast/astTagRequireModify/reAssignHandler' : 'ast/astTagRequire/reAssignHandler'
      this.$ajax({
        url: this.$ajax.setUrl(url),
        method: 'post',
        data: this.$ajax.setData({
          assetId: this.editForm.tagId,
          nowHandler: handlerId,
          procId: 1
        })
      }).then(({ data }) => {
        if (data && data.code === '0') {
          this.$message.success(data.data || data.msg)
          this.confirm()
        } else {
          this.$message.error(data.data || data.msg)
          this.loading = false
          this.reassign = false
        }
      })
    },
    confirmUser(handlerId) {
      if (handlerId) {
        if (this.reassign) {
          this.changeHandler(handlerId)
        } else {
          this.editForm.handlerId = handlerId
          this.submit()
        }
      } else {
        this.reassign = false
        this.loading = false
      }
    }
  }
}
</script>

<style lang="scss">
.require-develop {
  .drawer-content {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  .info {
    margin-left: -20px;
    margin-right: -20px;
    margin-top: 30px;
    padding: 10px 20px;
    background-color: rgba($color: #03a9f4, $alpha: 0.1);
  }
  .source-item {
    width: 100%;
    height: 45px;
    margin-bottom: 20px;
    box-shadow: #eee 0 0 10px;
    position: relative;
    &.sync-item {
      font-size: 14px;
      height: auto;
      .source-title {
        font-size: 16px;
        height: 100%;
        span {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
        }
      }
      .el-input {
        padding: 0 5px !important;
      }
      .el-input__inner {
        height: 35px !important;
        line-height: 35px !important;
        border: 1px solid #dcdfe6 !important;
      }
      .sync-row-title {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
      }
      .el-col {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .source-title {
      font-weight: bold;
      width: 160px;
      padding-left: 40px;
      line-height: 45px;
      color: #fff;
      position: absolute;
      &:before {
        width: 10px;
        height: 10px;
        content: '';
        background-color: #eee9ff;
        border: 2px solid #cfc7ee;
        margin-top: -5px;
        position: absolute;
        top: 50%;
        left: 20px;
        border-radius: 50%;
      }
      &:after {
        width: 0;
        height: 0;
        content: '';
        margin-top: -10px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
      }
      &.linear-purpose:after {
        border-left: 10px solid #7c6bed;
      }
      &.linear-blue:after {
        border-left: 10px solid #635fd7;
      }
      &.linear-cyan:after {
        border-left: 10px solid #0696ec;
      }
      &.linear-red:after {
        border-left: 10px solid #c563ee;
      }
      &.linear-yellow:after {
        border-left: 10px solid #f19849;
      }
    }
    .source-content {
      line-height: 45px;
      padding: 0 30px 0 180px;
      &.rela-content {
        padding-left: 195px;
      }
    }
    .el-select .el-input__inner,
    .el-input .el-input__inner {
      height: 45px;
      line-height: 45px;
      border: 0;
    }
  }
  .row2 {
    margin-bottom: 20px;
    padding: 0 0 0 200px;
    border-bottom: 0;
    position: relative;
    &:before {
      width: 3px;
      height: 50px;
    }
    &:after {
      width: 3px;
      height: 30px;
    }
    .title {
      width: 200px;
      color: $theme-color;
      margin: 2px 0 18px 0;
      text-align: center;
      position: absolute;
      left: 0;
      svg {
        width: 50px;
        height: 50px;
        margin: 20px 0 10px 0;
      }
    }
    .content {
      height: auto;
      min-height: 150px;
      padding: 15px 15px 0 15px;
      text-align: left;
      border-left: 3px solid $border-color;
      position: relative;
      .el-form-item,
      .el-form-item__content {
        height: 100%;
        line-height: 25px;
      }
      .el-checkbox-group {
        height: 100%;
        overflow-y: auto;
      }
      .el-form-item {
        padding-bottom: 10px;
      }
      .el-form-item__error {
        top: calc(100% - 12px);
      }
      &:after {
        width: 3px !important;
        height: auto !important;
        content: '';
        position: absolute;
        top: 10px;
        left: -3px !important;
        bottom: 10px !important;
      }
      &.blue:after {
        background-color: #23ace3;
      }
    }
  }
  .params-selection {
    width: 500px;
    margin-top: 10px;
    position: relative;
    box-shadow: #eee 0 0 10px;
  }
  .params {
    padding: 20px;
    box-shadow: #eee 0 0 10px;
    position: relative;
    &:before {
      width: 5px;
      content: '';
      background: linear-gradient(#6464c8, #7173e0);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
    }
    & > .el-form-item:first-child {
      margin-left: -20px;
    }
    .params-title {
      text-align: center;
      margin-bottom: 5px;
    }
    li {
      margin-bottom: 10px;
      & + li {
        padding: 10px 0;
      }
    }
  }
  .tag-name {
    font-weight: bold;
    text-align: center;
    margin-bottom: 10px;
    span {
      display: inline-block;
      padding: 10px 100px;
      background-color: #fbf5e5;
      border: 1px dashed #faeace;
    }
  }
  .ol-item {
    padding-left: 40px;
    margin-bottom: 10px;
    line-height: 40px;
    background-color: rgba($color: #f7fbff, $alpha: 0.8);
    box-shadow: #eee 0 0 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    span {
      font-weight: bold;
      color: $theme-color;
    }
    &:before {
      width: 10px;
      height: 10px;
      border: 2px solid #c9c1f4;
      content: '';
      background-color: #a796f4;
      position: absolute;
      left: 15px;
      top: 15px;
      border-radius: 50%;
    }
  }
  .ol-card {
    margin-bottom: 20px;
    padding: 0 0 0 200px;
    border-bottom: 0;
    position: relative;
    &:before {
      width: 3px;
      height: 50px;
    }
    &:after {
      width: 3px;
      height: 30px;
    }
    .card-title {
      width: 200px;
      color: $theme-color;
      margin: 2px 0 18px 0;
      text-align: center;
      position: absolute;
      left: 0;
      svg {
        width: 50px;
        height: 50px;
        margin: 20px 0 10px 0;
      }
    }
    .arts-title {
      margin-top: 30px;
    }
    .card-content {
      height: auto;
      min-height: 150px;
      padding: 15px 15px 0 15px;
      text-align: left;
      border-left: 3px solid $border-color;
      position: relative;
      .el-form-item,
      .el-form-item__content {
        height: 100%;
        line-height: 25px;
      }
      &:after {
        width: 3px;
        content: '';
        position: absolute;
        top: 10px;
        left: -3px;
        bottom: 10px;
      }
      &.blue:after {
        background-color: #23ace3;
      }
    }
  }
  .card {
    margin-bottom: 20px;
    text-align: center;
    &:not(.editcard) {
      background-color: rgba($color: #f7fbff, $alpha: 0.8);
    }
    .title {
      margin: 0 0 20px 0;
    }
    .content {
      height: 60px;
      color: $theme-color;
      position: relative;
      &:after {
        width: 100%;
        height: 3px;
        content: '';
        background-color: #666bc6;
        position: absolute;
        left: 0;
        bottom: -13px;
      }
    }
  }
  .response {
    text-align: center;
    .card {
      background-color: rgba($color: #f7fbff, $alpha: 0.8);
    }
    .icon {
      display: inline-block;
      width: 70px;
      height: 70px;
      margin: 20px 0;
      line-height: 70px;
      color: #fff;
      border-radius: 50%;
      svg {
        width: 40px;
        height: 40px;
        margin-top: 10px;
      }
    }
    .title {
      margin: 0 0 20px 0;
    }
    .content {
      height: 30px;
      color: $theme-color;
      text-align: center;
      position: relative;
      &:after {
        width: 100%;
        height: 3px;
        content: '';
        background-color: #666bc6;
        position: absolute;
        left: 0;
        bottom: -13px;
      }
    }
  }
  .tag-status-list li {
    background-color: rgba($color: #f7fbff, $alpha: 0.8);
  }
}
.tag-drawer.require-single-drawer {
  .el-drawer__body {
    .drawer-content {
      .params {
        .el-input,
        .el-select {
          width: 100%;
        }
        .el-button {
          margin-top: 5px;
        }
      }
    }
  }
}
</style>
